<template>
  <div class="forms">
    <el-button type="primary" class="addButton" @click="addButton"
      >添加</el-button
    >
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="规格名称" prop="specsname">
          <el-input v-model="ruleForm.specsname"></el-input>
        </el-form-item>
        <el-form-item label="规格属性" prop="attrs">
          <div class="flex">
            <el-input v-model="ruleForm.attrs"> </el-input>
            <el-button type="primary" size="mini" @click="newAttrs"
              >新增</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="" prop="newattrs">
          <el-card>
            <div slot="header" class="clearfix">
              <span>新增规格属性</span>
            </div>
            <span v-if="newAttrsData == ''" class="empty">什么都没有~</span>
            <el-tag
              v-else
              type="success"
              closable
              @close="removeAttr(index)"
              v-for="(item, index) in newAttrsData"
              :key="index"
              >{{ item }}</el-tag
            >
          </el-card>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addSpecs" v-if="sid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editSpecs" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSpecsAdd, getSpecsInfo,getSpecsEdit } from "../../../request/api";
export default {
  props: ["dialog"],
  data() {
    return {
      title: "",
      sid: "",
      newAttrsData: [],
      // 添加表单数据
      ruleForm: {
        specsname: "", //规格名称
        attrs: "", //规格属性
        status: 1, //1状态   1正常2禁用   number类型
      },
    };
  },
  methods: {
    // 重置表单数据
    resetFiled() {
      this.ruleForm = {
        specsname: "",
        attrs: "",
        status: 1,
      };
    },
    // 点击添加
    addButton() {
      this.sid = "";
      this.title = "添加商品规格";
      this.resetFiled()
      this.newAttrsData=[]
      this.dialog.isShowDialog = true;
    },
    // 移除新增的规格属性
    removeAttr(index) {
      this.newAttrsData.splice(index, 1);
    },
    // 点击新增
    newAttrs() {
      this.newAttrsData.push(this.ruleForm.attrs);
      this.ruleForm.attrs = "";
    },
    // 添加商品规格
    addSpecs() {
      this.ruleForm.attrs = this.newAttrsData.join();
      getSpecsAdd(this.ruleForm).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            // 重置表单数据
            this.resetFiled();
            this.dialog.isShowDialog = false;
            // 刷新列表数据
            this.$emit("refreshList");
          }
        },
        (err) => err
      );
    },
    // 点击编辑展示对话框数据
    getOneSpecsData(id) {
      this.sid = id;
      this.title = "编辑商品规格";
      getSpecsInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm.specsname = res.data.list[0].specsname;
            this.ruleForm.status = res.data.list[0].status;
            this.newAttrsData = res.data.list[0].attrs;
            this.dialog.isShowDialog = true;
          }
        },
        (err) => err
      );
    },
    // 编辑商品规格
    editSpecs() {
      let obj = {
        id: this.sid,
        attrs:this.newAttrsData.join(),
        specsname:this.ruleForm.specsname,
        status:this.ruleForm.status
      };
      console.log(obj);
      getSpecsEdit(obj).then((res) => {
        if (res.data.code == 200) {
          this.newAttrsData = [];
          this.$message.success("编辑成功");
          // 重置表单数据
          this.resetFiled();
          this.dialog.isShowDialog = false;
          // 刷新列表数据
          this.$emit("refreshList");
        }
      }, err=>{
        console.log(err);
      });
    },
  },
};
</script>

<style scoped>
.addButton {
  margin-bottom: 20px;
}
.flex {
  display: flex;
}
.flex .el-input {
  margin-right: 20px;
}
.el-card {
  width: 100%;
}
.el-card /deep/ .el-card__header {
  padding: 0px 20px;
}
.el-card /deep/ .el-card__body {
  padding: 10px 20px;
}
.el-tag {
  margin-right: 10px;
}
.empty {
  font-size: 12px;
  color: gray;
}
</style>